<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :span="24">
            <a-form-item label="城市选择">
              <a-input-group compact >
                <!-- <v-region type="column" :town="true" @values="regionChange"></v-region> -->
                <v-region type="group" :town="true" @values="regionChange"></v-region>
                <a-input style="width:200px; margin-left:10px;" placeholder="请输入社区名称" v-model="search.shequ" />
                <a-button type="primary" icon="search" style="margin-left: 8px; border-radius:4px;">查询</a-button>
                <a-button type="primary" icon="reload" style="margin-left: 8px; border-radius:4px;">重置</a-button>
              </a-input-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 图表区域 -->
    <a-row>
      <a-spin tip="Loading..." :spinning="spinning">
        <a-col :span="24">
          <template>
            <baidu-map class="map" :center="{lng: 116.4052886963, lat: 39.9049873352}" :zoom="14" :scroll-wheel-zoom='true'>
              <bml-heatmap :data="data" :max="100" :radius="20">
              </bml-heatmap>
            </baidu-map>
          </template>
        </a-col>
      </a-spin>
    </a-row>

  </a-card>
</template>

<script>
  import {BmlHeatmap} from 'vue-baidu-map'

  export default {
    components: {
      BmlHeatmap
    },
    data () {
      return {
        search:{
          shequ:'',  //社区名称
        },
        spinning: false, //加载特效
        data: [
          {lng: 116.428261, lat: 39.921984, count: 50},
          {lng: 116.427332, lat: 39.920532, count: 61},
          {lng: 116.428261, lat: 39.921984, count: 70},
          {lng: 116.427332, lat: 39.924532, count: 91},
          {lng: 116.428261, lat: 39.923984, count: 80},
          {lng: 116.427332, lat: 39.926532, count: 71},
          {lng: 116.427787, lat: 39.921658, count: 45}
        ],
      }
    },
    watch: {
    },
    created () {
    },
    mounted () {
      this.$nextTick(() => {
        this.spinning = true;
        setTimeout(() => {
            // this.getdata(); //调用数据采集次数
            this.spinning = false;
        }, 1000);
      })
    },
    methods: {
      //城市选择
      regionChange (data) {
        console.log(data)
      },
    }
  }
</script>

<style scoped>
/* @import '~@assets/less/common.less'; */
/* 统计图 */
.chartdivs{
  width: 100%;
  height: 600px;
  margin-top: 30px;
}
.map{
  width: 100%;
  height: 800px;
}
</style>